<template>
  <div class="wrapper-jsc">
    <div class="regionName-box">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="年">
          <el-date-picker
            v-model="listQuery.year"
           type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="合同数量及金额" name="first">
        <el-row
          style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
        >
          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 24 }"
            :lg="{ span: 16 }"
            :xl="{ span: 16 }"
          >
            <div class="newcontract-wrapper">
              <el-table
                :data="list"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
               
                class="childre-table"
                default-expand-all
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
              >
                <el-table-column
                  prop="provinceName"
                  align="center"
                  label="战区名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="contractNumber"
                  label="合同数量"
                  align="center"
                   
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="contractAmount"
                  label="合同金额"
                  align="center"
                   
                ></el-table-column>
                <el-table-column
                  prop="contractAmount"
                  label="目标金额"
                  align="center"
                   
                ></el-table-column>
                <el-table-column
                  prop="contractAmount"
                  label="差额"
                  align="center"
                   
                ></el-table-column>
              </el-table>
            </div>
          </el-col>

          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 24 }"
            :lg="{ span: 8 }"
            :xl="{ span: 8 }"
          >
            <div class="chart-wrapper">
              <pie-chart ref="peiChart" :listQuery="this.listQuery" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="周期回款" name="second">
        <div class="chart-wrapper zq-box">
          <bar-chart  ref='zqmoney' :listQuery="this.listQuery" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getNewSignData } from "@/api/region_jsc";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
export default {
  data() {
    return {
     
      activeName: "first",
      value1: "",
      value2: "",
      value3: "",
      list: [],
      listQuery: {
        year: "2020",
        month: '0',
      },
      pieData: 0,
    };
  },
  components: {
    PieChart,
    BarChart,
  },
  created() {
    this.fetchData();
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
   
 
    fetchData() {
      getNewSignData(this.listQuery).then((res) => {
        this.list = res.data.data;
       this.$refs.peiChart.getAll();
      });
    },
 
  },
};
</script>
<style lang="scss" scoped>
.wrapper-jsc {
  position: relative;
  .regionName-box {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
  }
}
.zq-box {
  margin-top: 24px;
  margin-bottom: 24px;
}
</style>